웹 사이트를 만들다보면 js, css, img 등 수 많은 파일들이 생겨난다. 웹 사이트 로딩 시 많은 파일들이 다운되어지고, 서버와의 접속이 많아져 애플리케이션의 로딩이 느려진다.
\n각각의 서로 다른 패키지들이 서로 같은 이름을 가진 변수, 함수를 사용할 수 있다.\n이는 예상치 못한 충돌을 발생시킨다.
\n이를 해결하기 위해 등장한 도구들을 bundler라 한다.
bundle? '묶는다' 라는 뜻이다.
\n의존 관계에 있는 모듈들을 하나의 자바스크립트로 번들링하는 모듈 번들러
\n# Webpack V4는 webpack-cli를 요구한다\n$ npm install --save-dev webpack webpack-cli# babel-loader 설치\n$ npm install --save-dev babel-loaderwebpack.config.js은 Webpack이 실행될 때 참조하는 설정 파일이다.
\n프로젝트 루트에 webpack.config.js 파일을 생성하고 아래와 같이 작성한다.
// Webpack이 실행될 때 참조하는 설정 파일\nconst path = require('path');\n\nmodule.exports = {\n // entry file\n entry: './src/js/main.js',\n\n // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정\n output: {\n path: path.resolve(__dirname, 'dist/js'),\n filename: 'bundle.js',\n },\n\n module: {\n rules: [\n {\n test: /\\.js$/,\n include: [path.resolve(__dirname, 'src/js')],\n exclude: /node_modules/,\n use: {\n loader: 'babel-loader',\n options: {\n presets: ['@babel/preset-env'],\n },\n },\n },\n ],\n },\n};